// 折线图

import React from 'react';
import {parsePercent, numberHandle, safeMultiple} from '~/utils/number';
import CommonEchart from '~/page/FineBi/common/CommonEchart';
import withPannel from '../withPannel';
import {formatTooltip} from '../../utils';

const tooltipCallback = params => formatTooltip(params);

const labelFormatter = params => {
    const {name, percent} = params;
    return `${name}: ${percent}%`;
};

const extendOptions = chart => ({
    tooltip: {
        trigger: 'axis',
        formatter: tooltipCallback
    },
    legend: {
        left: 'left',
        type: 'scroll'
    },
    xAxis: {
        common: {
            type: 'value',
            axisLabel: {formatter: value => `${safeMultiple(value, 100)}%`},
            splitLine: {
                show: false
            },
            // axisTick: {
            //     show: false
            // },
            // axisLabel: {
            //     show: false
            // },
        }
    },
    yAxis: {
        common: {
            type: 'category',
            // splitLine: {show: false},
            data: chart?.xAxis?.[0]?.data,
            // axisLabel: {
            //     formatter: value => parsePercent(value, 0)
            // }
        }
    },
    series: {
        common: {
            // radius: '50%',
            // center: ['60%', '50%'],
            barMaxWidth: 15,
            // label: {formatter: labelFormatter},
            barGap: '10%',
        }
    }
});

const EchartConfig = props => {
    const {dataSource, unitId, children} = props;

    return (
        <>
            {children}
            <CommonEchart
                {...props}
                id={unitId}
                height={720}
                extendEchartsOptions={extendOptions(dataSource?.chart)}
                dataSource={dataSource}
            />
        </>
    );
};

export default withPannel(EchartConfig);
